<template>
  <el-card header="语言主题" shadow="never">
    <el-form ref="form" label-width="120px" style="margin-top:20px;">
      <el-form-item :label="$t('user.nightmode')">
        <el-switch v-model="config.dark" active-icon="el-icon-moon" inactive-icon="el-icon-sunny" active-value="Y"
                   inactive-value="N" inline-prompt></el-switch>
        <div class="el-form-item-msg">{{ $t('user.nightmode_msg') }}</div>
      </el-form-item>

      <el-form-item :label="$t('user.language')">
        <el-select v-model="config.lang">
          <el-option label="简体中文" value="zh-cn"></el-option>
          <el-option label="English" value="en"></el-option>
        </el-select>
        <div class="el-form-item-msg">{{ $t('user.language_msg') }}</div>
      </el-form-item>

      <el-form-item label="主题颜色">
        <el-color-picker v-model="config.colorPrimary" :predefine="colorList">></el-color-picker>
      </el-form-item>

      <el-form-item label="框架布局">
        <el-select v-model="config.layout" placeholder="请选择">
          <el-option label="默认" value="default"></el-option>
          <el-option label="通栏" value="header"></el-option>
          <el-option label="经典" value="menu"></el-option>
          <el-option label="功能坞" value="dock"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="折叠菜单">
        <el-switch v-model="config.menuIsCollapse" active-value="Y" inactive-value="N"></el-switch>
      </el-form-item>

      <el-form-item label="标签栏">
        <el-switch v-model="config.layoutTags" active-value="Y" inactive-value="N"></el-switch>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :loading="saveing" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import colorTool from '@/utils/color'

export default {
  data() {
    return {
      // 保存遮罩层
      saveing: false,
      colorList: ['#409EFF', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
      config: {
        dark: this.$TOOL.data.get('APP_STYLE_DARK') ? 'Y' : 'N',
        lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
        colorPrimary: this.$TOOL.data.get('APP_COLOR') || this.$CONFIG.COLOR || '#409EFF',
        layout: this.$store.state.global.layout,
        menuIsCollapse: this.$store.state.global.menuIsCollapse ? 'Y' : 'N',
        layoutTags: this.$store.state.global.layoutTags ? 'Y' : 'N',
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.$API.config.initUserConfig.get().then(response => {
        if (response.status) {
          if (response.data) {
            let layoutTags = response.data.find(item => {
              if (item.configCode === "APP_LAYOUT_TAGS") {
                return item;
              }
            })
            if (layoutTags && layoutTags.configValue) {
              this.config.layoutTags = layoutTags.configValue
            }

            let layout = response.data.find(item => {
              if (item.configCode === "APP_LAYOUT") {
                return item;
              }
            })
            if (layout && layout.configValue) {
              this.config.layout = layout.configValue
            }

            let color = response.data.find(item => {
              if (item.configCode === "APP_COLOR") {
                return item;
              }
            })
            if (color && color.configValue) {
              this.config.colorPrimary = color.configValue
            }

            let lang = response.data.find(item => {
              if (item.configCode === "APP_LANG") {
                return item;
              }
            })
            if (lang && lang.configValue) {
              this.config.lang = lang.configValue
            }

            let collapse = response.data.find(item => {
              if (item.configCode === "APP_MENU_IS_COLLAPSE") {
                return item;
              }
            })
            if (collapse && collapse.configValue) {
              this.config.menuIsCollapse = collapse.configValue
            }

            let dark = response.data.find(item => {
              if (item.configCode === "APP_STYLE_DARK") {
                return item;
              }
            })
            if (dark && dark.configValue) {
              this.config.dark = dark.configValue
            }
          }
        } else {
          this.$message.warning("获取用户初始化配置失败：" + response.msg);
        }
      })
    },
    save() {
      this.saveing = true;
      this.$API.config.updateUserConfig.put(this.config).then(response => {
        if (response.status) {
          if (this.config.dark === 'Y') {
            document.documentElement.classList.add("dark")
            this.$TOOL.data.set("APP_STYLE_DARK", this.config.dark === 'Y')
          } else {
            document.documentElement.classList.remove("dark")
            this.$TOOL.data.remove("APP_STYLE_DARK")
          }

          this.$TOOL.data.set("APP_LANG", this.config.lang);

          if (!this.config.colorPrimary) {
            this.config.colorPrimary = '#409EFF'
          }
          document.documentElement.style.setProperty('--el-color-primary', this.config.colorPrimary);
          for (let i = 1; i <= 9; i++) {
            document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(this.config.colorPrimary, i / 10));
          }
          for (let i = 1; i <= 9; i++) {
            document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(this.config.colorPrimary, i / 10));
          }
          this.$TOOL.data.set("APP_COLOR", this.config.colorPrimary);

          this.$store.commit("SET_layout", this.config.layout)

          this.$store.commit("TOGGLE_menuIsCollapse", this.config.menuIsCollapse)

          this.$store.commit("TOGGLE_layoutTags", this.config.layoutTags)

          this.$alert(response.msg, "提示", {type: 'success'});
          this.saveing = false;
          this.getList();
        } else {
          this.$alert(response.msg, "提示", {type: 'error'});
          this.saveing = false;
        }
      });
    }
  }
}
</script>

<style>
</style>
